<template>
  <sui-modal v-model="notification.modal.open">
    <sui-modal-header style="display:flex;justify-content: space-between;padding-right:14px!important">
      <div>某某聊天</div>
      <div
        style="display:flex;justify-content:flex-end;"
        @click="toggleNotificationModal"
      >
        <sui-icon name="sign-out" />
      </div>
    </sui-modal-header>
    <sui-modal-content
      scrolling
      image
    >
      <sui-modal-description>
        <template>
          <sui-comment-group style="max-width">
            <h3
              is="sui-header"
              dividing
            >Comments</h3>
            <sui-comment>
              <sui-comment-avatar src="static/images/avatar/small/matt.jpg" />
              <sui-comment-content>
                <a is="sui-comment-author">Matt</a>
                <sui-comment-metadata>
                  <div>Today at 5:42PM</div>
                </sui-comment-metadata>
                <sui-comment-text>How artistic!</sui-comment-text>
                <sui-comment-actions>
                  <sui-comment-action>Reply</sui-comment-action>
                </sui-comment-actions>
              </sui-comment-content>
            </sui-comment>
            <sui-comment>
              <sui-comment-avatar src="static/images/avatar/small/elliot.jpg" />
              <sui-comment-content>
                <a is="sui-comment-author">Elliot Fu</a>
                <sui-comment-metadata>
                  <div>Yesterday at 12:30AM</div>
                </sui-comment-metadata>
                <sui-comment-text>
                  <p>This has been very useful for my research. Thanks as well!</p>
                </sui-comment-text>
                <sui-comment-actions>
                  <sui-comment-action>Reply</sui-comment-action>
                </sui-comment-actions>
              </sui-comment-content>
              <sui-comment-group>
                <sui-comment>
                  <sui-comment-avatar src="static/images/avatar/small/jenny.jpg" />
                  <sui-comment-content>
                    <a is="sui-comment-author">Jenny Hess</a>
                    <sui-comment-metadata>
                      <div>Just now</div>
                    </sui-comment-metadata>
                    <sui-comment-text>
                      Elliot you are always so right :)
                    </sui-comment-text>
                    <sui-comment-actions>
                      <sui-comment-action>Reply</sui-comment-action>
                    </sui-comment-actions>
                  </sui-comment-content>
                </sui-comment>
              </sui-comment-group>
            </sui-comment>

            <sui-comment>
              <sui-comment-avatar src="static/images/avatar/small/joe.jpg" />
              <sui-comment-content>
                <a is="sui-comment-author">Joe Henderson</a>
                <sui-comment-metadata>
                  <div>5 days ago</div>
                </sui-comment-metadata>
                <sui-comment-text>
                  Dude, this is awesome. Thanks so much
                </sui-comment-text>
                <sui-comment-actions>
                  <sui-comment-action>Reply</sui-comment-action>
                </sui-comment-actions>
              </sui-comment-content>
            </sui-comment>
          </sui-comment-group>
        </template>
      </sui-modal-description>
    </sui-modal-content>
    <sui-modal-actions>
      <sui-comment-group>
        <div
          class="ui reply form"
          style="margin-top:0"
        >
          <div class="field">
            <textarea
              class="i-tablet"
              v-model="message"
            ></textarea>
            <input
              placeholder="First Name"
              class="i-mobile"
              v-model="message"
            >
          </div>
          <sui-button
            content="Add
        Reply"
            label-position="left"
            icon="edit"
            primary
            style="margin-bottom: 14px;"
            @click="send"
          />
        </div>
      </sui-comment-group>
      <!-- <sui-button positive @click.native="toggleNotificationModal">OK</sui-button> -->
    </sui-modal-actions>
  </sui-modal>
</template>
<script>
import { mapActions } from "vuex";
import { mapGetters } from "vuex";
export default {
  name: "zui-notification-modal",
  computed: {
    ...mapGetters(["notification"])
  },
  data() {
    return {
      message: undefined
    };
  },
  methods: {
    ...mapActions(["toggleNotificationModal", "handleNotificationModal"]),
    modalToggle() {
      this.toggleNotificationModal();
    },
    send() {
      console.log(this.message);
      this.$emit("send", this.message);
    }
  }
};
</script>

<style lang="less" scoped>
@tablet: 992px;
@mobile: 768px;
/deep/ .ui.comments {
  max-width: none;
}
/deep/ .ui.reply.form {
  margin-top: 0;
}
/deep/ .ui.comments .reply.form textarea {
  height: 1em;
}
.i-tablet {
  display: none;
  @media (min-width: @tablet) {
    display: block;
  }
}
.i-mobile {
  display: block;
  @media (min-width: @tablet) {
    display: none;
  }
}
</style>
